diff --git a/landing/investor-profile-modal.react.js b/landing/investor-profile-modal.react.js
--- a/landing/investor-profile-modal.react.js
+++ b/landing/investor-profile-modal.react.js
@@ -39,7 +39,7 @@
   }, [investorID, popModal]);
 
   return (
-    <ModalOverlay onClose={popModal}>
+    <ModalOverlay onClose={popModal} backgroundColor="var(--modal-overlay)">
       <div className={css.modalContainer}>{selectedInvestor}</div>
     </ModalOverlay>
   );
diff --git a/landing/investor-profile.css b/landing/investor-profile.css
--- a/landing/investor-profile.css
+++ b/landing/investor-profile.css
@@ -29,13 +29,10 @@
 }
 
 p.name {
-  font-size: 24px;
-  font-weight: 500;
   margin-bottom: 12px;
 }
 
 p.description {
-  font-size: 18px;
   margin-bottom: 32px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -46,17 +43,15 @@
 }
 
 p.involvement {
-  font-weight: 500;
-  font-size: 14px;
   margin-bottom: 8px;
 }
 
 .profile span svg {
-  color: var(--grey);
+  color: var(--black-60);
 }
 
 .profile span svg:hover {
-  color: var(--white);
+  color: var(--white-100);
 }
 
 .profile span > a + a {
diff --git a/landing/investor-profile.react.js b/landing/investor-profile.react.js
--- a/landing/investor-profile.react.js
+++ b/landing/investor-profile.react.js
@@ -7,6 +7,7 @@
 import * as React from 'react';
 
 import css from './investor-profile.css';
+import typography from './typography.css';
 
 type Props = {
   +name: string,
@@ -37,11 +38,16 @@
     [css.profile]: true,
     [css.profileModal]: isModalActive,
   });
-
+  const nameClassName = classNames([typography.heading3, css.name]);
   const descriptionClassName = classNames({
+    [typography.paragraph1]: true,
     [css.description]: true,
     [css.descriptionModal]: isModalActive,
   });
+  const involvementClassName = classNames([
+    typography.paragraph3,
+    css.involvement,
+  ]);
 
   const stopPropagation = React.useCallback(e => e.stopPropagation(), []);
 
@@ -91,9 +97,9 @@
     <a className={profileContainerClassName} onClick={onClick}>
       <img alt={`image of Comm investor ${name}`} src={imageURL} />
       <div className={css.investorInfoContainer}>
-        <p className={css.name}>{name}</p>
+        <p className={nameClassName}>{name}</p>
         <p className={descriptionClassName}>{description}</p>
-        <p className={css.involvement}>{involvement}</p>
+        <p className={involvementClassName}>{involvement}</p>
         <span>
           {websiteIcon}
           {twitterIcon}
diff --git a/landing/investors.css b/landing/investors.css
--- a/landing/investors.css
+++ b/landing/investors.css
@@ -2,30 +2,13 @@
   padding: 16px 0;
   margin: 0 auto 48px auto;
   max-width: 1200px;
+  padding-top: 72px;
 }
 
 .header {
-  font-family: 'iA Writer Duo S', monospace;
-  font-weight: 500;
-  line-height: 1.35;
   text-align: center;
-  --scale: calc(0.75rem + 2vw);
-  --smallest-font-size: 30px;
-  --largest-font-size: 50px;
-  --smallest-padding-size: 32px;
-  --largest-padding-size: 64px;
-
-  padding-bottom: clamp(
-    var(--smallest-padding-size),
-    var(--scale),
-    var(--largest-padding-size)
-  );
-
-  font-size: clamp(
-    var(--smallest-font-size),
-    var(--scale),
-    var(--largest-font-size)
-  );
+  color: var(--white-80);
+  margin-bottom: 48px;
 }
 
 .investorContainer {
@@ -49,6 +32,6 @@
 p.subtitle {
   max-width: 60ch;
   margin: 0 auto;
-  padding: 0 16px 36px 16px;
-  font-size: 1.6rem;
+  padding: 0 32px 40px 32px;
+  color: var(--white-80);
 }
diff --git a/landing/investors.react.js b/landing/investors.react.js
--- a/landing/investors.react.js
+++ b/landing/investors.react.js
@@ -1,5 +1,6 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
@@ -8,6 +9,7 @@
 import InvestorProfileModal from './investor-profile-modal.react.js';
 import InvestorProfile from './investor-profile.react.js';
 import css from './investors.css';
+import typography from './typography.css';
 
 function Investors(): React.Node {
   const { pushModal } = useModalContext();
@@ -35,13 +37,16 @@
     ));
   }, [onClickInvestorProfileCard]);
 
+  const headerClassName = classNames([typography.heading1, css.header]);
+  const subheaderClassName = classNames([typography.subheading2, css.subtitle]);
+
   return (
     <div className={css.wrapper}>
-      <h2 className={css.header}>Investors</h2>
+      <h2 className={headerClassName}>Investors</h2>
 
       <section>
         <div className={css.headingContainer}>
-          <p className={css.subtitle}>
+          <p className={subheaderClassName}>
             Comm is proud to count over 80 individuals &amp; organizations from
             our community as investors.
           </p>